import { useState } from 'react';
import { Layout, Form, Input, Button, message, Card, Typography, Row, Col } from 'antd';
import axios from 'axios';
import Sidebar from '../Sidebar.jsx';
import sanitizeHtml from 'sanitize-html';  // 导入 sanitize-html
import './index.css'; // 自定义样式

const { Sider, Content } = Layout;
const { Title, Text } = Typography;

const TranslateArticle = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [translatedText, setTranslatedText] = useState(null);
  const [translationError, setTranslationError] = useState('');

  // 文章提交处理函数
  const onFinish = async (values) => {
    setLoading(true); // 启用加载状态
    setTranslationError(''); // 清除之前的错误信息
  
    try {
      // 将文章内容中的换行符转为 HTML <br /> 标签
      const contentWithBreaks = values.original_text.replace(/\n/g, '<br />');
      
      // 使用 sanitize-html 清理内容，移除不安全的 HTML 标签
      const sanitizedContent = sanitizeHtml(contentWithBreaks, {
        allowedTags: [  // 允许的 HTML 标签
          'b', 'i', 'em', 'strong', 'a', 'p', 'br', 'ul', 'ol', 'li', 'u', 's', 'blockquote'
        ],
        allowedAttributes: {  // 允许的 HTML 标签属性
          '*': ['href', 'target'],  // 允许所有标签有 href 和 target 属性
        },
      });

      // 1. 提交文章到后端保存
      const response = await axios.post('http://localhost:8080/api/articles/add', {
        title: values.title,
        original_text: sanitizedContent,  // 提交已清理过的内容
      });
      message.success('文章已成功提交');
  
      // 获取到文章ID
      const articleId = response.data.articleId;
  
      // 2. 调用翻译接口，传递文章ID
      const translatedResponse = await axios.post('http://localhost:8080/api/translations/translateAndSave', null, {
        params: { articleId }  // 传递 articleId 作为查询参数
      });
  
      if (translatedResponse && translatedResponse.data) {
        message.success('翻译成功！');
        setTranslatedText(translatedResponse.data.translatedText);  // 更新翻译内容
      } else {
        setTranslationError('翻译失败，请稍后再试');
      }
  
    } catch (error) {
      message.error('提交失败，请稍后再试');
      console.error('Error submitting article:', error);
    } finally {
      setLoading(false); // 结束加载状态
      form.resetFields(); // 重置表单字段
    }
  };
  
  return (
    <Layout>
      <Sider width={240} style={{ background: '#f7f7f7',marginTop:'50px' }}>
        <Sidebar />
      </Sider>

      <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
        <div className="translate-article-container" style={{ padding: '24px', background: '#f7f7fb', borderRadius: '12px' }}>
          <Title level={2} style={{ textAlign: 'center', color: '#211f3f' }}>
            翻译文章
          </Title>

          {/* 文章表单 */}
          <Form form={form} layout="vertical" onFinish={onFinish}>
            <Form.Item
              label="文章标题"
              name="title"
              rules={[{ required: true, message: '请输入文章标题' },
                  { max: 100, message: '标题不能超过100个字符' }]}
              
            >
              <Input style={{ borderRadius: '8px', padding: '10px' }} />
            </Form.Item>

            <Form.Item
              label="文章内容"
              name="original_text"
              rules={[{ required: true, message: '请输入文章内容' },
                { max: 5000, message: '文章内容不能超过5000个字符' }
              ]}
            >
              <Input.TextArea rows={6} style={{ borderRadius: '8px', padding: '10px' }} />
            </Form.Item>

            <Form.Item style={{ textAlign: 'center' }}>
              <Button 
                type="primary" 
                htmlType="submit" 
                loading={loading} 
                style={{
                  backgroundColor: '#211f3f', 
                  borderRadius: '8px', 
                  width: '200px', 
                  fontSize: '16px', 
                  padding: '10px'
                }}
              >
                提交并翻译文章
              </Button>
            </Form.Item>
          </Form>

          {/* 显示翻译后的结果 */}
          {translatedText && (
            <Row gutter={16} style={{ marginTop: '40px' }}>
              <Col span={12}>
                <Card
                  title={<Title level={3}>翻译结果</Title>}
                  bordered={false}
                  style={{
                    background: 'white',
                    borderRadius: '12px',
                    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
                    minHeight: '300px',
                    padding: '16px',
                  }}
                >
                  <Text style={{ whiteSpace: 'pre-line', color: '#211f3f', fontSize: '16px' }}>
                    {translatedText}
                  </Text>
                </Card>
              </Col>
            </Row>
          )}

          {/* 如果有翻译错误 */}
          {translationError && (
            <Row style={{ marginTop: '20px' }}>
              <Col span={24}>
                <Card bordered style={{ backgroundColor: '#211f3f', borderRadius: '12px' }}>
                  <Text style={{ color: '#e74c3c', fontSize: '16px' }}>
                    {translationError}
                  </Text>
                </Card>
              </Col>
            </Row>
          )}
        </div>
      </Content>
    </Layout>
  );
};

export default TranslateArticle;